<template>
  <div style="height: 100%;display: flex;flex-direction: column">
    <el-table
        :data="data"
        border
        v-loading="loading"
        :element-loading-text="loadingText"
        :empty-text="emptyText"
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        style="flex: 1;width: 100%">
      <template v-for="item in columns">
        <el-table-column
            :prop="item.prop"
            :label="item.label"
        >
        </el-table-column>
      </template>
      <!--        <el-table-column v-for="item in 100" prop="phone" :label="'手机号'+item"></el-table-column>-->
    </el-table>

    <div class="example-pagination-block">
      <el-pagination
          background
          layout="total,prev, pager, next,jumper,sizes"
          @size-change="sizeChange"
          @current-change="currentChange"
          :page-sizes="[10, 20, 30, 40]"
          v-model:current-page="page.currentPage" v-model:page-size="page.pageSize" v-model:total="page.total" />
    </div>
  </div>
</template>

<script setup>
 const props = defineProps({
   data:{
     type:Array,
     default:[],
     required:false
   },
   loading:{
     type:Boolean,
     default: false
   },
   loadingText:{
     type:String,
     default:"正在加载..."
   },
   emptyText:{
     type:String,
     default:"暂无数据"
   },
   columns:{
     type:Array,
     default:[]
   }
 })
</script>

<script>
  export default {
    name:"GuiguTable"
  }
</script>
<style scoped>
.example-pagination-block{
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>